﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyForm.aspx.cs" Inherits="_EasyForm" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单生成器</title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#VLine").height($(window).height());
            $("#fieldDiv").width($(window).width() - $("#tablesDiv").width() - 15);
            $("#fieldDiv").height($(window).height() - 2);
            $("#fieldstable").height($(window).height() - 30);
            $("#tablesDiv").height($(window).height() - 20);
            $("#checkall").click(function () {
                var ck = $(this).hasClass("checked");
                $("#fieldstable .ckall input[type='checkbox']").each(function () {
                    if (ck) {
                        if ($(this).hasClass("checked")) {
                            this.click();
                        }
                    }
                    else {
                        if (!$(this).hasClass("checked")) {
                            this.click();
                        }
                    }
                });
                if ($(this).hasClass("checked")) {
                    $(this).removeClass("checked");
                }
                else {
                    $(this).addClass("checked");
                }
            });
            $("#fieldstable .ckall input[type='checkbox']").click(function () {
                var size = $("#fieldstable .ckall input[type='checkbox'].checked").size();
                $("#cols").val(Math.floor(size / 10));
                if ($(this).hasClass("checked")) {
                    $(this).removeClass("checked");
                    $(this).parents("td").css("border-bottom", "1px dotted #fff").next(".dtype").css("border-bottom", "1px dotted #fff").nextAll("td:not('.dtype')").hide();
                    if (size < 1) {
                        $("#fieldstable th:gt(1)").children().hide();
                    }
                }
                else {
                    $(this).addClass("checked");
                    $(this).parents("td").css("border-bottom", "1px dotted #c2c2c2").next(".dtype").css("border-bottom", "1px dotted #c2c2c2").nextAll("td:not('.dtype')").show();
                    if (size > 0) {
                        $("#fieldstable th:gt(1)").children().show();
                    }
                }
            });
            $("#checkall,#fieldstable .ckall input[type='checkbox']").each(function () {
                if ($(this).attr("checked")) {
                    $(this).addClass("checked");
                    if ($(this).parents("td")) {
                        $(this).parents("td").css("border-bottom", "1px dotted #c2c2c2").next(".dtype").css("border-bottom", "1px dotted #c2c2c2").nextAll("td:not('.dtype')").show();
                        $("#fieldstable th:gt(1)").children().show();
                    }
                }
                else {
                    $(this).removeClass("checked");
                    if ($(this).parents("td")) {
                        $(this).parents("td").css("border-bottom", "1px dotted #fff").next(".dtype").css("border-bottom", "1px dotted #fff").nextAll("td:not('.dtype')").hide();
                        $("#fieldstable th:gt(1)").children().hide();
                    }
                }
            });
            if ($("#fieldstable .ckall input[type='checkbox'].checked").size() < 1) {
                $("#fieldstable th:gt(1)").children().hide();
            }
            else {
                $("#fieldstable th:gt(1)").children().show();
            }
        });
    </script>
    <style type="text/css">
        body
        {
            padding: 0;
            margin: 0;
        }
        
        table
        {
            border: none;
        }
        
        a
        {
            text-decoration: none;
            color: #79a1b5;
        }
        
        #tablesDiv
        {
            padding: 5px;
            width: 110px;
            overflow: auto;
            border-right: 1px dotted #0094ff;
        }
        
        #fieldstable
        {
            width: 100%;
            position: absolute;
            top: 30px;
            overflow: auto;
        }
        
        #tablesDiv a, #tablesDiv label
        {
            font-size: 12px;
            overflow-wrap: break-word;
            word-wrap: break-word;
            float: left;
        }
        
        #tables input
        {
            float: left;
        }
        
        #tables
        {
            width: 400%;
        }
        
        #fieldDiv
        {
            position: absolute;
            left: 123px;
            top: 0px;
            background-color: #f8f8f8;
        }
        
        #tables td
        {
            overflow: hidden;
            overflow-wrap: break-word;
        }
        
        #info
        {
            width: 100%;
            position: absolute;
            height: 30px;
            z-index: 999;
            top: 0px;
        }
        
        
        #fieldstable table
        {
            width: 100%;
        }
        
        #info input#go
        {
            margin: 3px;
            height: 24px;
        }
        
        #fieldstable th, #fieldstable td
        {
            text-align: center;
            display: table-cell;
            empty-cells: show;
            white-space: nowrap;
            overflow-wrap: break-word;
            overflow: hidden;
            background-color: #fff;
        }
        
        #info label
        {
            font-size: 13px;
            padding-left: 5px;
        }
        
        #fieldstable th.head
        {
            border-right: 1px dotted #c2c2c2;
            font-size: 13px;
        }
        
        .floatHead
        {
            position: fixed;
            border-top: 1px solid #0094ff;
            background-color: #f9f9f9;
            border-bottom: 1px dotted #c2c2c2;
            border-top: 1px dotted #c2c2c2;
            width: 100%;
            background-color: #f8f8f8;
        }
        
        #fieldstable td
        {
            height: 25px;
            font-size: 12px;
            border-bottom: 1px dotted #c2c2c2;
            border-right: 1px dotted #c2c2c2;
            border-top: 1px dotted #c2c2c2;
        }
        
        .hidden
        {
            display: none;
        }
        
        .show
        {
            display: initial;
        }
        
        .error
        {
            background-color: #e5d172;
        }
        
        span.nullable
        {
            color: orange;
        }
        
        .show.focus
        {
            background-color: #fafafa;
        }
        
        input.show.focus
        {
            background-color: #f9f9f9;
        }
        
        #head, #head td, #head th
        {
            height: 20px;
        }
        
        .text1
        {
            width: 30px;
            margin-left: 45px;
        }
        
        .text2
        {
            width: 60px;
            margin-left: 45px;
        }
        
        .text
        {
            width: 98%;
        }
        
        #head, head td
        {
            border: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="tablesDiv">
        <div style="padding-left: 16px;">
            <label>
                选择表：</label><asp:LinkButton ID="reTables" runat="server" OnClick="refreshTables"
                    ToolTip="重新读取表数据及其字段信息，会重置所有设置！">刷新</asp:LinkButton>
        </div>
        <asp:RadioButtonList ID="tables" runat="server" RepeatDirection="Vertical" AutoPostBack="true"
            OnSelectedIndexChanged="ReBindTableFields">
        </asp:RadioButtonList>
    </div>
    <div id="fieldDiv">
        <div id="info">
            <div>
                <label for="cols">
                    列数 ：</label>
                <asp:DropDownList ID="cols" runat="server" ToolTip="默认每个字段占一行，对于字段多的情况，可增加列数以减少行数。">
                    <asp:ListItem>1</asp:ListItem>
                    <asp:ListItem>2</asp:ListItem>
                    <asp:ListItem>3</asp:ListItem>
                    <asp:ListItem>4</asp:ListItem>
                    <asp:ListItem>5</asp:ListItem>
                    <asp:ListItem>6</asp:ListItem>
                </asp:DropDownList>
                <label for="prkey">
                    主键：</label>
                <asp:DropDownList ID="prkey" ToolTip="主键，用于查找数据" runat="server" AutoPostBack="true"
                    OnSelectedIndexChanged="OnPryKeyChange">
                </asp:DropDownList>
                <label for="addtime">
                    添加时间</label>
                <asp:DropDownList ID="addtime" OnSelectedIndexChanged="OnAddTiemChange" AutoPostBack="true"
                    runat="server" ToolTip="时间字段，新增记录时作为添加的时间。">
                </asp:DropDownList>
                <label for="updatatime">
                    修改时间</label>
                <asp:DropDownList ID="updatatime" runat="server" ToolTip="时间字段，修改记录时作为修改的时间。">
                </asp:DropDownList>
                <asp:CheckBox ID="needJsp" runat="server" Text="生成JsPrint" ToolTip="是否生成JscriptPrint方法"
                    Checked="true" />
                <asp:CheckBox ID="validator" runat="server" Text="使用验证控件" ToolTip="使用RequiredFieldValidator和RegularExpressionValidator控件来验证非空和数据类型"
                    Checked="true" />
                <asp:Button ID="go" runat="server" OnClick="creatForm" Text="生成表单" />
                <asp:Literal ID="tips" runat="server"></asp:Literal>
                <asp:TextBox ID="IDFieldType" CssClass="hidden" runat="server"></asp:TextBox>
            </div>
        </div>
        <div id="fieldstable">
            <table>
                <thead class="floatHead">
                    <tr>
                        <th style="width: 110px; text-align: left;" class="head">
                            <asp:CheckBox ID="checkall" runat="server" Text="请选择" />
                        </th>
                        <th style="width: 66px;" class="head">
                            <label>
                                类型</label>
                        </th>
                        <th style="width: 90px;" class="head">
                            <label>
                                文本</label>
                        </th>
                        <th style="width: 120px;" class="head">
                            <label>
                                使用控件</label>
                        </th>
                        <th style="width: 40px;" class="head">
                            <label>
                                非空</label>
                        </th>
                        <th style="width: 60px;" class="head">
                            <asp:Label ID="head1" runat="server" Visible="false" Text="文本长度"></asp:Label>
                        </th>
                        <th style="width: 66px;" class="head">
                            <asp:Label ID="head2" Visible="false" runat="server" Text="填充方式"></asp:Label>
                        </th>
                        <th style="width: 400px;" class="head">
                            <asp:Label ID="head3" Visible="false" runat="server" Text="数据源" ToolTip="用于填充的数据源"></asp:Label>
                        </th>
                        <th style="width: 180px;" class="head">
                            <label>
                                控件设置</label>
                        </th>
                        <th>
                            &nbsp;
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="head">
                        <td style="width: 110px;">
                        </td>
                        <td style="width: 60px;">
                        </td>
                        <td style="width: 90px;">
                        </td>
                        <td style="width: 120px;">
                        </td>
                        <td style="width: 40px;">
                        </td>
                        <td style="width: 66px;">
                        </td>
                        <td style="width: 66px;">
                        </td>
                        <td style="width: 400px;">
                        </td>
                        <td style="width: 180px;">
                        </td>
                        <td>
                        </td>
                    </tr>
                    <asp:Repeater ID="taableFields" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td style="text-align: left; padding-left: 3px;">
                                    <div style="width: 110px; white-space: nowrap; overflow: hidden;">
                                        <asp:CheckBox runat="server" ID="cid" CssClass="ckall" Text='<%#Eval("Name") %>' />
                                    </div>
                                    <asp:TextBox ID="fieldtype" CssClass="hidden" runat="server" Text='<%#Eval("Type") %>'></asp:TextBox>
                                    <asp:TextBox ID="fieldname" CssClass="hidden" runat="server" Text='<%#Eval("Name") %>'></asp:TextBox>
                                    <asp:TextBox ID="fieldnull" CssClass="hidden" runat="server" Text='<%#Eval("NullAble") %>'></asp:TextBox>
                                </td>
                                <td class="dtype">
                                    <%#Eval("Type") %><span class="nullable" title="NullAble"><%#Eval("NullAble") %></span>
                                </td>
                                <td>
                                    <asp:TextBox ID="labeltext" Width="80" runat="server" Text='<%#Eval("Name") %>'></asp:TextBox>
                                </td>
                                <td>
                                    <asp:DropDownList ID="ctrtype" runat="server" Width="95%" AutoPostBack="true" OnSelectedIndexChanged="onCtrlTypeChange">
                                    </asp:DropDownList>
                                </td>
                                <td>
                                    <asp:CheckBox ID="noempty" Checked="true" runat="server" Text="是" ToolTip="是否允许留空输入值" />
                                </td>
                                <td>
                                    <asp:TextBox ID="textLenth" Width="80%" placeholder="默认" Visible="false" ToolTip="文本最大长度，留空则不限长度"
                                        runat="server"></asp:TextBox>
                                    <asp:RegularExpressionValidator CssClass="inputError" runat="server" ErrorMessage="!"
                                        SetFocusOnError="true" ControlToValidate="textLenth" ValidationExpression="^\d+$"></asp:RegularExpressionValidator>
                                </td>
                                <td>
                                    <asp:DropDownList ID="dataSourcesType" Visible="false" Width="63" runat="server"
                                        AutoPostBack="true" OnSelectedIndexChanged="SourceTypeChange">
                                        <asp:ListItem Value="0">文本</asp:ListItem>
                                        <asp:ListItem Value="1">数据表</asp:ListItem>
                                    </asp:DropDownList>
                                </td>
                                <td style="text-align: left;">
                                    <asp:TextBox ID="textvalues" placeholder="请输入用于填充控件的值" CssClass="hidden text" runat="server"></asp:TextBox>
                                    <asp:DropDownList ID="sourcetable" CssClass="hidden" Width="29.5%" runat="server"
                                        AutoPostBack="true" OnSelectedIndexChanged="dataSourrceChange">
                                    </asp:DropDownList>
                                    <asp:DropDownList ID="textFiled" Width="34%" ToolTip="DataTextField" runat="server"
                                        CssClass="hidden">
                                    </asp:DropDownList>
                                    <asp:DropDownList ID="valueFiled" Width="34%" ToolTip="DataValueField" runat="server"
                                        CssClass="hidden">
                                    </asp:DropDownList>
                                </td>
                                <td>
                                    <asp:Panel ID="settextarea" runat="server" Visible="false">
                                        <label for="cols">
                                            Cols：</label>
                                        <asp:TextBox ID="cols" runat="server" Text="25" Width="30"></asp:TextBox>
                                        <asp:RegularExpressionValidator CssClass="inputError" runat="server" ErrorMessage="!"
                                            SetFocusOnError="true" ControlToValidate="cols" ValidationExpression="^\d+$"></asp:RegularExpressionValidator>
                                        <label for="rows">
                                            Rows：</label><asp:TextBox ID="rows" runat="server" Text="2" Width="30"></asp:TextBox>
                                        <asp:RegularExpressionValidator CssClass="inputError" runat="server" ErrorMessage="!"
                                            SetFocusOnError="true" ControlToValidate="rows" ValidationExpression="^\d+$"></asp:RegularExpressionValidator>
                                    </asp:Panel>
                                    <asp:Panel ID="setboxlist" runat="server" Visible="false">
                                        <label>
                                            方向：</label><asp:DropDownList ID="direction" ToolTip="设置控件摆放的方向" runat="server">
                                                <asp:ListItem>水平</asp:ListItem>
                                                <asp:ListItem>垂直</asp:ListItem>
                                            </asp:DropDownList>
                                        <label>
                                            列数：</label>
                                        <asp:DropDownList ID="columns" ToolTip="仅对水平方向有效" runat="server">
                                            <asp:ListItem>1</asp:ListItem>
                                            <asp:ListItem>2</asp:ListItem>
                                            <asp:ListItem>3</asp:ListItem>
                                            <asp:ListItem>4</asp:ListItem>
                                            <asp:ListItem>5</asp:ListItem>
                                            <asp:ListItem Selected="True">6</asp:ListItem>
                                            <asp:ListItem>7</asp:ListItem>
                                            <asp:ListItem>8</asp:ListItem>
                                            <asp:ListItem>9</asp:ListItem>
                                            <asp:ListItem>10</asp:ListItem>
                                            <asp:ListItem>11</asp:ListItem>
                                            <asp:ListItem>12</asp:ListItem>
                                            <asp:ListItem>13</asp:ListItem>
                                            <asp:ListItem>14</asp:ListItem>
                                            <asp:ListItem>15</asp:ListItem>
                                            <asp:ListItem>16</asp:ListItem>
                                            <asp:ListItem>17</asp:ListItem>
                                            <asp:ListItem>18</asp:ListItem>
                                        </asp:DropDownList>
                                    </asp:Panel>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </tbody>
            </table>
        </div>
    </div>
    </form>
</body>
</html>
